<template>
	<view>
		<view class="warp">
			<view class="item" @click="selectAccount(key)" :class="selectIndex===key?'actvie':''" v-for="(item,key) in accountData" :key="key">
			<image  class="person-img"  v-show="item.accountType===1&&selectIndex!==key" src="../../static/person.png" ></image>
			<image  class="person-img" v-show="item.accountType===1&&selectIndex===key" src="../../static/person-active.png" ></image>
			<image  class="mech-img" v-show="item.accountType===2&&selectIndex!==key" src="../../static/mech.png" ></image>
			<image  class="mech-img" v-show="item.accountType===2&&selectIndex===key" src="../../static/mecn-active.png" ></image>
			<image  class="sub-account-img" v-show="item.accountType===3&&selectIndex!==key" src="../../static/sub-account.png" ></image>	
			<image  class="sub-account-img" v-show="item.accountType===3&&selectIndex===key" src="../../static/sub-account-active.png" ></image>	
	        <text>{{item.companyName}}</text>
			<text class="account-type-1" v-if="item.accountType===1">个人</text>
			<text class="account-type-2" v-if="item.accountType===2">机构</text>
			<text class="account-type-3" v-if="item.accountType===3">子账号</text>
			</view>
		</view>
		<view :class="isMath?'bottom-button-match':'bottom-button'">
			<BottomButton @commitData="handleCommit"></BottomButton>
		</view>
	</view>
</template>

<script>
	import BottomButton from "@/components/bottom-button"
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				accountData:[],
				selectIndex:0,
				isMath:false,
				openid:''
			};
		},
		onLoad(option) {
			this.openid = option.openid;
			this.loadAccountData();
			let info = uni.getSystemInfoSync()
			let model = info.model;
				if(model.indexOf('X') !== -1 || model.indexOf('11') !== -1 || model.indexOf('12') !== -1){
					this.isMath = true;
				}
		},
		components:{
			BottomButton
		},
		computed:{
			...mapState('userStore',['token'])
		},
		methods:{
			...mapMutations('userStore', ['saveUserInfo','SetIsSubscribe','setPermList','setMainAccount','clearPermList']),
			//获取未读信息
			getMsgMap() {
				this.$request.get({
					url: 'sysMessage/getMsgMap',
				}).then(info => {
					console.log('info', info)
					for (let k of info) {
						if (k.label == '通知') {
							this.sysNum = k.value?k.value:0
						}
						if (k.label == '评论') {
							this.commitNum = k.value?k.value:0
						}
					}
					//显示小圆点
					if(parseFloat(this.sysNum)!==0||parseFloat(this.commitNum)!==0){
					      uni.showTabBarRedDot({index:2});
					}
				}, res => {});
			},
			//选择子账号
			selectAccount(c){
				this.selectIndex = c;
			},
			//子账号登录
			handleCommit(){
				let  params = {};
				params.userInfoId = this.accountData[this.selectIndex].userInfoId;
				params.orgInfoId = this.accountData[this.selectIndex].orgInfoId;
				params.kcOpenId = this.openid;
				this.$request.post({
					url:'/userOrgRelation/setMyAccount',
					data:params,
					header:{
						token:this.token
					}
				}).then(res=>{
					console.log(res.userInfo)
					let userInfo = res.userInfo;
					let mainAccount = res.mainAccount;
					userInfo.token = this.token;
					uni.setStorageSync('userInfo', userInfo);
				    uni.setStorageSync('mainAccount',mainAccount);
					this.setMainAccount(mainAccount)
					this.saveUserInfo(userInfo);
					uni.setStorageSync('autoGoLoginFlag', false);				
					let empt = {};
					res.permList.map((v)=>{
						empt[v.perms]= true;
					})
				    uni.setStorageSync('permList',empt)
					this.setPermList(empt)
					this.SetIsSubscribe(true)
					//判断是否显示未读消息红点
					this.getMsgMap();
					getApp().connectWS();
					uni.switchTab({
					    url: '/pages/myinfo/myinfo'
					});
				})
			},
			//获取子账号列表
			loadAccountData(){
				this.$request.get({
					url:'userOrgRelation/getMyAccountNew',
					header:{
						token:this.token
					}
				})
				.then(res=>{
				    this.accountData = res;
				})
			}
		}
	}
</script>

<style lang="scss">
.warp {
	padding: 60upx 48upx 150upx;
	.account-type-1 {
		display: inline-block;
		font-size: 20upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2A7DFA;
		line-height: 20upx;
		width: 60upx;
		height: 27upx;
		line-height: 27upx;
		background: #F3F7FF;
		border-radius: 13upx;
		margin-left: 14upx;
	}
	.account-type-2 {
		display: inline-block;
		font-size: 20upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F5A623;
		line-height: 20upx;
		width: 60upx;
		height: 27upx;
		line-height: 27upx;
		background: #FFF9F0;
		border-radius: 13upx;
		margin-left: 14upx;
	}
	.account-type-3 {
		display: inline-block;
		font-size: 20upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #76C0C6;
		line-height: 20upx;
		width: 80upx;
		height: 27upx;
		line-height: 27upx;
		background: #EFF7F8;
		border-radius: 13upx;
		margin-left: 14upx;
	}
	.item {
		height: 95upx;
		border-radius: 6upx;
		margin-bottom: 16upx;
		box-sizing: border-box;
		line-height: 95upx;
		padding-left: 106upx;
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		border: 1upx solid #FAFAFA;
		.person-img {
			width: 20upx;
			height: 23upx;
			vertical-align: middle;
			margin-bottom: 7upx;
			margin-right: 32upx;
		}
		.mech-img {
			width: 29upx;
			height: 23upx;
			vertical-align: middle;
			margin-bottom: 6upx;
			margin-right: 32upx;
		}
		.sub-account-img {
			width: 25upx;
			height: 22upx;
			vertical-align: middle;
			margin-bottom: 6upx;
			margin-right: 32upx;
		}
	    text {
			text-align: center;
		}
	}
	.actvie {	
		border-radius: 6upx;
		box-sizing: border-box;
		border: 1upx solid #F1F1F1;
		font-size: 24upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		border: 1upx solid #2A7DFA;
		color: #2A7DFA;
	}
}
.bottom-button {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
.bottom-button-match {
	position: fixed;
	bottom: 75upx;
	left: 0;
	width: 100%;
}
</style>
